<template>
  <div>

    <div class="operation">
      <slot name="operation"></slot>
    </div>

    <el-table :data="tableData" style="width: 100%;" @sort-change="handleSortChange" @selection-change="handleSelectChange" :span-method="spanMethod">
      <table-column v-if="checkbox" type="selection" width="48" />
      <slot></slot>
    </el-table>
    <div class="table-footer">
      <el-row type="flex" align="center">
        <el-col :span="10" class="table-footer-operation">
          <div class="operation-bottom">
            <slot name="footer"></slot>
          </div>
        </el-col>
        <el-col :span="14" class="pager" v-if="tableData && tableData.length">
          <el-pagination background :small="small" :current-page="queryParams.page.index" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50,100,200]" :page-size="queryParams.page.size" layout="total, sizes, prev, pager, next, jumper" :total="total" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PostList } from '@/service/common'
import { ref, onMounted } from 'vue'
const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  params: {
    type: Object,
    default: () => {}
  },
  checkbox: {
    type: Boolean,
    default: false
  },
  pager: {
    type: Boolean,
    default: false
  }
})

const tableData = ref<Array>([])
const total = ref<Number>(0)
const queryParams = ref<IPageModel>({
  orderbyName: '',
  isAsc: false,
  beginDateTime: '',
  endDateTime: '',
  entity: {},
  page: {
    index: 1,
    size: 10
  }
})

const loadData = (): void => {
  // queryParams.value = Object.assign(queryParams.value, props.params)
  PostList(props.url, queryParams.value).then((res: any) => {
    tableData.value = res.data
    total.value = res.count
  })
}

const handleSizeChange = (size: number) => {
  queryParams.value.page.size = size
  loadData()
}
const handleCurrentChange = (index: number) => {
  queryParams.value.page.index = index
  loadData()
}
onMounted(() => {
  loadData()
})
</script>


<style lang="scss" scoped>
.operation {
  display: flex;
  text-align: left;
  ::v-deep .el-button--small {
    margin: 0 0 16px;
    font-size: 14px;
    padding: 8px 16px;
  }
  .el-dropdown {
    margin: 0 0 16px 8px;
    ::v-deep .el-button {
      margin: 0;
    }
  }
  .el-button + .el-button {
    margin-left: 8px;
  }

  .el-select {
    margin: 16px 0 16px 8px;
    vertical-align: bottom;
  }
}
.operation-bottom {
  ::v-deep {
    .el-button--small {
      font-size: 14px;
    }
    .el-dropdown {
      margin-left: 8px;
    }
  }
  .el-button + .el-button {
    margin-left: 8px;
  }
  ::v-deep .el-select {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 8px;
  }
}
.table-footer {
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .el-row {
    width: 100%;
  }
  .el-pagination {
    float: right;
  }
}
</style>